Manajer Uji Kenai WebXR: Menerapkan Sistem Ray Casting untuk Pengalaman Imersif

Munculnya teknologi Realitas Tertambah (AR) dan Realitas Virtual (VR) telah membuka kemungkinan baru yang menarik untuk menciptakan pengalaman digital yang imersif dan interaktif. WebXR, API JavaScript untuk mengakses kemampuan VR dan AR di browser web, memungkinkan pengembang di seluruh dunia untuk membangun pengalaman ini di berbagai perangkat. Komponen kunci dalam menciptakan pengalaman WebXR yang menarik adalah kemampuan untuk berinteraksi dengan lingkungan virtual. Di sinilah Manajer Uji Kenai WebXR dan ray casting berperan.

Apa itu Ray Casting dan Mengapa Penting?

Ray casting, dalam konteks WebXR, adalah teknik yang digunakan untuk menentukan apakah sinar virtual (garis lurus) berpotongan dengan permukaan dunia nyata yang dideteksi oleh sistem AR atau objek virtual di lingkungan VR. Pikirkan seperti mengarahkan pointer laser ke sekeliling Anda dan melihat di mana ia mengenai. Manajer Uji Kenai WebXR menyediakan alat untuk melakukan ray cast ini dan mengambil hasilnya. Informasi ini sangat penting untuk berbagai interaksi, termasuk:

• Penempatan Objek: Memungkinkan pengguna menempatkan objek virtual ke permukaan dunia nyata, seperti menempatkan kursi virtual di ruang tamu mereka (AR). Pertimbangkan pengguna di Tokyo yang mendekorasi apartemen mereka secara virtual sebelum berkomitmen pada pembelian furnitur.
• Penargetan dan Pemilihan: Memungkinkan pengguna untuk memilih objek virtual atau berinteraksi dengan elemen UI menggunakan pointer virtual atau tangan (AR/VR). Bayangkan seorang ahli bedah di London menggunakan AR untuk menimpa informasi anatomis ke pasien, memilih area tertentu untuk ditinjau.
• Navigasi: Memindahkan avatar pengguna melalui dunia virtual dengan mengarahkan ke suatu lokasi dan menginstruksikan mereka untuk pindah ke sana (VR). Sebuah museum di Paris dapat menggunakan VR untuk memungkinkan pengunjung menavigasi melalui pameran sejarah.
• Pengenalan Gerakan: Menggabungkan pengujian kenai dengan pelacakan tangan untuk menafsirkan gerakan pengguna, seperti mencubit untuk memperbesar atau menggesek untuk menggulir (AR/VR). Ini dapat digunakan dalam pertemuan desain kolaboratif di Sydney, di mana peserta memanipulasi model virtual bersama-sama.

Memahami Manajer Uji Kenai WebXR

Manajer Uji Kenai WebXR adalah bagian penting dari API WebXR yang memfasilitasi ray casting. Ia menyediakan metode untuk membuat dan mengelola sumber uji kenai, yang mendefinisikan asal dan arah sinar. Manajer kemudian menggunakan sumber-sumber ini untuk melakukan uji kenai terhadap dunia nyata (dalam AR) atau dunia virtual (dalam VR) dan mengembalikan informasi tentang setiap persimpangan. Konsep-konsep utama meliputi:

• XRFrame: XRFrame mewakili cuplikan waktu dari adegan XR, termasuk pose penampil dan setiap bidang atau fitur yang terdeteksi. Uji kenai dilakukan terhadap XRFrame.
• XRHitTestSource: Mewakili sumber sinar yang akan di-cast. Ini mendefinisikan asal (di mana sinar dimulai) dan arah (ke mana sinar mengarah). Anda biasanya akan membuat satu XRHitTestSource per metode input (misalnya, pengontrol, tangan).
• XRHitTestResult: Berisi informasi tentang kenai yang berhasil, termasuk pose (posisi dan orientasi) titik persimpangan dan jarak dari asal sinar.
• XRHitTestTrackable: Mewakili fitur yang dilacak (seperti bidang) di dunia nyata.

Menerapkan Sistem Uji Kenai Dasar

Mari kita telusuri langkah-langkah untuk menerapkan sistem uji kenai WebXR dasar menggunakan JavaScript. Contoh ini berfokus pada penempatan objek AR, tetapi prinsip-prinsipnya dapat diadaptasi untuk skenario interaksi lainnya.

Langkah 1: Meminta Sesi WebXR dan Dukungan Uji Kenai

Pertama, Anda perlu meminta sesi WebXR dan memastikan bahwa fitur 'uji-kenai' diaktifkan. Fitur ini diperlukan untuk menggunakan Manajer Uji Kenai.

            
async function initXR() {
  try {
    xrSession = await navigator.xr.requestSession('immersive-ar', {
      requiredFeatures: ['hit-test'],
    });

    xrSession.addEventListener('end', () => {
      console.log('XR session ended');
    });

    // Initialize your WebGL renderer and scene here
    initRenderer();

    xrSession.updateRenderState({
      baseLayer: new XRWebGLLayer(xrSession, renderer.getContext())
    });

    xrReferenceSpace = await xrSession.requestReferenceSpace('local');
    xrHitTestSource = await xrSession.requestHitTestSource({
      space: xrReferenceSpace
    });

    xrSession.requestAnimationFrame(renderLoop);

  } catch (e) {
    console.error('WebXR failed to initialize', e);
  }
}

            

              
                Copy
              
            
          

Penjelasan:

• `navigator.xr.requestSession('immersive-ar', ...)`: Meminta sesi AR imersif. Argumen pertama menentukan jenis sesi ('immersive-ar' untuk AR, 'immersive-vr' untuk VR).
• `requiredFeatures: ['hit-test']`: Secara krusial, meminta fitur 'uji-kenai', mengaktifkan Manajer Uji Kenai.
• `xrSession.requestHitTestSource(...)`: Membuat XRHitTestSource, mendefinisikan asal dan arah sinar. Dalam contoh dasar ini, kita menggunakan ruang referensi 'viewer', yang sesuai dengan sudut pandang pengguna.

Langkah 2: Membuat Lingkaran Render

Lingkaran render adalah jantung dari aplikasi WebXR Anda. Di situlah Anda memperbarui adegan dan merender setiap bingkai. Dalam lingkaran render, Anda akan melakukan uji kenai dan memperbarui posisi objek virtual Anda.

            
function renderLoop(time, frame) {
  xrSession.requestAnimationFrame(renderLoop);

  const xrFrame = frame;
  const xrPose = xrFrame.getViewerPose(xrReferenceSpace);

  if (xrPose) {
    const hitTestResults = xrFrame.getHitTestResults(xrHitTestSource);

    if (hitTestResults.length > 0) {
      const hit = hitTestResults[0];
      const hitPose = hit.getPose(xrReferenceSpace);

      // Update the position and orientation of your virtual object
      object3D.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
      object3D.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
      object3D.visible = true; // Make the object visible when a hit is found
    } else {
      object3D.visible = false; // Hide the object if no hit is found
    }
  }

  renderer.render(scene, camera);
}

            

              
                Copy
              
            
          

Penjelasan:

• `xrFrame.getHitTestResults(xrHitTestSource)`: Melakukan uji kenai menggunakan XRHitTestSource yang dibuat sebelumnya. Ia mengembalikan array objek XRHitTestResult, yang mewakili semua persimpangan yang ditemukan.
• `hitTestResults[0]`: Kami mengambil hasil kenai pertama. Dalam skenario yang lebih kompleks, Anda mungkin ingin mengulangi semua hasil dan memilih yang paling sesuai.
• `hit.getPose(xrReferenceSpace)`: Mengambil pose (posisi dan orientasi) dari kenai di ruang referensi yang ditentukan.
• `object3D.position.set(...)` and `object3D.quaternion.set(...)`: Memperbarui posisi dan orientasi objek virtual Anda (object3D) agar sesuai dengan pose kenai. Ini menempatkan objek pada titik persimpangan.
• `object3D.visible = true/false`: Mengontrol visibilitas objek virtual, membuatnya muncul hanya ketika kenai ditemukan.

Langkah 3: Menyiapkan Adegan 3D Anda (Contoh dengan Three.js)

Contoh ini menggunakan Three.js, sebuah pustaka 3D JavaScript populer, untuk membuat adegan sederhana dengan kubus. Anda dapat menyesuaikan ini untuk menggunakan pustaka lain seperti Babylon.js atau A-Frame.

            
let scene, camera, renderer, object3D;
let xrSession, xrReferenceSpace, xrHitTestSource;

function initRenderer() {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.xr.enabled = true; // Enable WebXR
  document.body.appendChild(renderer.domElement);

  const geometry = new THREE.BoxGeometry(0.1, 0.1, 0.1); // 10cm cube
  const material = new THREE.MeshNormalMaterial();
  object3D = new THREE.Mesh(geometry, material);
  object3D.visible = false; // Initially hide the object
  scene.add(object3D);

  renderer.setAnimationLoop(() => { /* No animation loop here. WebXR controls it.*/ });
  renderer.xr.setSession(xrSession);

  camera.position.z = 2; // Move the camera back
}

// Call initXR() to start the WebXR experience
initXR();

            

              
                Copy
              
            
          

Penting: Pastikan untuk menyertakan pustaka Three.js di file HTML Anda:

            


            

              
                Copy
              
            
          

Teknik Lanjutan dan Optimasi

Implementasi dasar di atas menyediakan fondasi untuk pengujian kenai WebXR. Berikut adalah beberapa teknik dan optimasi lanjutan yang perlu dipertimbangkan saat Anda membangun pengalaman yang lebih kompleks:

1. Memfilter Hasil Uji Kenai

Dalam beberapa kasus, Anda mungkin ingin memfilter hasil uji kenai hanya untuk mempertimbangkan jenis permukaan tertentu. Misalnya, Anda mungkin hanya ingin mengizinkan penempatan objek pada permukaan horizontal (lantai atau meja). Anda dapat mencapai ini dengan memeriksa vektor normal dari pose kenai dan membandingkannya dengan vektor ke atas.

            
if (hitTestResults.length > 0) {
  const hit = hitTestResults[0];
  const hitPose = hit.getPose(xrReferenceSpace);

  // Check if the surface is approximately horizontal
  const upVector = new THREE.Vector3(0, 1, 0); // World up vector
  const hitNormal = new THREE.Vector3();
  hitNormal.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z);
  hitNormal.applyQuaternion(camera.quaternion); // Rotate the normal to world space

  const dotProduct = upVector.dot(hitNormal);

  if (dotProduct > 0.9) { // Adjust the threshold (0.9) as needed
    // Surface is approximately horizontal
    object3D.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
    object3D.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
    object3D.visible = true;
  } else {
    object3D.visible = false;
  }
}

            

              
                Copy
              
            
          

2. Menggunakan Sumber Input Transien

Untuk metode input yang lebih canggih seperti pelacakan tangan, Anda biasanya akan menggunakan sumber input transien. Sumber input transien mewakili peristiwa input sementara, seperti ketukan jari atau gerakan tangan. API Input WebXR memungkinkan Anda mengakses peristiwa ini dan membuat sumber uji kenai berdasarkan posisi tangan pengguna.

            
xrSession.addEventListener('selectstart', (event) => {
  const inputSource = event.inputSource;
  const targetRayPose = event.frame.getPose(inputSource.targetRaySpace, xrReferenceSpace);

  if (targetRayPose) {
    // Create a hit test source from the target ray pose
    xrSession.requestHitTestSourceForTransientInput({ targetRaySpace: inputSource.targetRaySpace, profile: inputSource.profiles }).then((hitTestSource) => {
       const hitTestResults = event.frame.getHitTestResults(hitTestSource);
       if (hitTestResults.length > 0) {
         const hit = hitTestResults[0];
         const hitPose = hit.getPose(xrReferenceSpace);

         // Place an object at the hit location
         const newObject = new THREE.Mesh(new THREE.SphereGeometry(0.05, 32, 32), new THREE.MeshNormalMaterial());
         newObject.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
         scene.add(newObject);
       }
       hitTestSource.cancel(); // Cleanup the hit test source
    });
  }
});

            

              
                Copy
              
            
          

3. Mengoptimalkan Kinerja

Pengalaman WebXR dapat memakan banyak sumber daya komputasi, terutama pada perangkat seluler. Berikut adalah beberapa tips untuk mengoptimalkan kinerja:

• Kurangi Frekuensi Uji Kenai: Melakukan uji kenai setiap bingkai dapat menjadi mahal. Pertimbangkan untuk mengurangi frekuensi, terutama jika gerakan pengguna lambat. Anda dapat menggunakan timer atau hanya melakukan uji kenai ketika pengguna memulai suatu tindakan.
• Gunakan Hierarki Volume Batas (BVH): Jika Anda memiliki adegan kompleks dengan banyak objek, menggunakan BVH dapat secara signifikan mempercepat deteksi tabrakan. Three.js dan Babylon.js menawarkan implementasi BVH.
• LOD (Level of Detail): Gunakan tingkat detail yang berbeda untuk model 3D Anda tergantung pada jaraknya dari kamera. Ini mengurangi jumlah poligon yang perlu dirender untuk objek yang jauh.
• Culling Okklusi: Jangan merender objek yang tersembunyi di belakang objek lain. Ini dapat secara signifikan meningkatkan kinerja dalam adegan yang kompleks.

4. Menangani Ruang Referensi yang Berbeda

WebXR mendukung ruang referensi yang berbeda, yang mendefinisikan sistem koordinat yang digunakan untuk melacak posisi dan orientasi pengguna. Ruang referensi yang paling umum adalah:

• Lokal: Asal sistem koordinat diperbaiki relatif terhadap posisi awal pengguna. Ini cocok untuk pengalaman di mana pengguna tetap berada di area kecil.
• Lantai terikat: Asalnya berada di permukaan lantai, dan bidang XZ mewakili lantai. Ini cocok untuk pengalaman di mana pengguna dapat bergerak di sekitar ruangan.
• Tak terbatas: Asalnya tidak diperbaiki, dan pengguna dapat bergerak bebas. Ini cocok untuk pengalaman AR skala besar.

Memilih ruang referensi yang sesuai penting untuk memastikan bahwa pengalaman WebXR Anda berfungsi dengan benar di lingkungan yang berbeda. Anda dapat meminta ruang referensi tertentu saat Anda membuat sesi XR.

            
xrReferenceSpace = await xrSession.requestReferenceSpace('bounded-floor');

            

              
                Copy
              
            
          

5. Menangani Kompatibilitas Perangkat

WebXR adalah teknologi yang relatif baru, dan tidak semua browser dan perangkat mendukungnya secara merata. Penting untuk memeriksa dukungan WebXR sebelum mencoba menginisialisasi sesi WebXR.

            
if (navigator.xr) {
  // WebXR is supported
  initXR();
} else {
  // WebXR is not supported
  console.error('WebXR is not supported in this browser.');
}

            

              
                Copy
              
            
          

Anda juga harus menguji pengalaman WebXR Anda di berbagai perangkat untuk memastikan bahwa ia berfungsi dengan benar.

Pertimbangan Internasionalisasi

Saat mengembangkan aplikasi WebXR untuk audiens global, penting untuk mempertimbangkan internasionalisasi (i18n) dan lokalisasi (l10n).

• Elemen Teks dan UI: Gunakan pustaka lokalisasi untuk menerjemahkan teks dan elemen UI ke dalam bahasa yang berbeda. Pastikan bahwa tata letak UI Anda dapat menampung panjang teks yang berbeda. Misalnya, kata-kata bahasa Jerman cenderung lebih panjang daripada kata-kata bahasa Inggris.
• Satuan Pengukuran: Gunakan satuan pengukuran yang sesuai untuk wilayah yang berbeda. Misalnya, gunakan meter dan kilometer di sebagian besar negara, tetapi gunakan kaki dan mil di Amerika Serikat dan Inggris Raya. Izinkan pengguna untuk memilih satuan pengukuran yang mereka sukai.
• Format Tanggal dan Waktu: Gunakan format tanggal dan waktu yang sesuai untuk wilayah yang berbeda. Misalnya, gunakan format YYYY-MM-DD di beberapa negara, dan format MM/DD/YYYY di negara lain.
• Mata Uang: Tampilkan mata uang dalam format yang sesuai untuk wilayah yang berbeda. Gunakan pustaka untuk menangani konversi mata uang.
• Sensitivitas Budaya: Waspadai perbedaan budaya dan hindari menggunakan gambar, simbol, atau bahasa yang mungkin menyinggung beberapa budaya. Misalnya, gerakan tangan tertentu mungkin memiliki arti yang berbeda dalam budaya yang berbeda.

Alat dan Sumber Daya Pengembangan WebXR

Beberapa alat dan sumber daya dapat membantu Anda dengan pengembangan WebXR:

• Three.js: Pustaka 3D JavaScript populer untuk membuat pengalaman berbasis WebGL.
• Babylon.js: Mesin 3D JavaScript canggih lainnya dengan fokus pada dukungan WebXR.
• A-Frame: Kerangka kerja web untuk membangun pengalaman VR menggunakan HTML.
• Emulator WebXR: Ekstensi browser yang memungkinkan Anda menguji pengalaman WebXR tanpa memerlukan perangkat VR atau AR fisik.
• Spesifikasi API Perangkat WebXR: Spesifikasi WebXR resmi dari W3C.
• Blog Realitas Campuran Mozilla: Sumber daya yang bagus untuk mempelajari tentang WebXR dan teknologi terkait.

Kesimpulan

Manajer Uji Kenai WebXR adalah alat yang ampuh untuk menciptakan pengalaman AR/VR yang interaktif dan imersif. Dengan memahami konsep ray casting dan API Uji Kenai, Anda dapat membangun aplikasi menarik yang memungkinkan pengguna berinteraksi dengan dunia virtual dengan cara yang alami dan intuitif. Seiring dengan teknologi WebXR yang terus berkembang, kemungkinan untuk menciptakan pengalaman yang inovatif dan menarik tidak terbatas. Ingatlah untuk mengoptimalkan kode Anda untuk kinerja dan pertimbangkan internasionalisasi saat mengembangkan untuk audiens global. Rangkullah tantangan dan penghargaan untuk membangun generasi berikutnya dari pengalaman web yang imersif.